<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 推荐使用方法 -->
<template>
    <div class="user_method_container" :style="{ 'background-color': background }">
        <p class="usage_head" :class="{'rtl-l text-r': $rtl}">推荐使用方法</p>
        <div class="massage_tips_line">
            <p :class="{'rtl-l text-r': $rtl}">请根据自身喜好选择按摩头</p>
            <p class="types_line">
                <span class="type" :class="{'rtl-l text-r': $rtl}">U型头</span>：
                <span class="tips" :class="{'rtl-l text-r': $rtl}">适用于按摩颈部、跟腱处</span>
            </p>
            <p class="types_line">
                <span class="type" :class="{'rtl-l text-r': $rtl}">环形头</span>：
                <span class="tips" :class="{'rtl-l text-r': $rtl}">适用于大肌肉群放松，如大腿等</span>
            </p>
            <p class="types_line">
                <span class="type" :class="{'rtl-l text-r': $rtl}">锥形头</span>：
                <span class="tips" :class="{'rtl-l text-r': $rtl}">适用于冲击深层组织，如经络、关节等</span>
            </p>
            <p class="types_line">
                <span class="type" :class="{'rtl-l text-r': $rtl}">平扁头</span>：
                <span class="tips" :class="{'rtl-l text-r': $rtl}">适用于各个肌肉部位的放松，如腰部、背部等</span>
            </p>
        </div>
        <div class="massage_img_line">
            <div class="box" :class="{'rtl-l': $rtl}" v-for="(item, i) in headTypeList" :key="i">
                <p class="img_box">
                    <img :src="item.icon">
                </p>
                <p class="name">{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        headTypeList: {
            type: Array
        }
    },
    data(){
        return {
            background: window.isDark ? '#202224' : '#FFFFFF'
        }
    }
}
</script>
<style scoped>
    .user_method_container{
        background: #fff;
        border-radius: 1.6rem;
        margin-top: 1.2rem;
        padding: 1.2rem 1.2rem 1.6rem;
    }

    .usage_head{
        opacity: 0.9;
        font-family: PingFangSC-Medium;
        font-size: 1.6rem;
        margin: .4rem 0 .8rem;
    }

    .massage_tips_line{
        font-family: HarmonyOS_Sans_SC_Medium;
        font-size: 1.2rem;
        opacity: .6;
        display: flex;
        flex-direction: column;
    }

    .types_line{
        line-height: 1.8rem;
        display: flex;
        flex-direction: row;
    }

    .types_line .type{
        flex: none;
    }

    .types_line .tips{
        display: inline-block;
        overflow: hidden;
        word-break: break-all;
    }

    .massage_img_line{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .box{
        width: 25%;
        text-align: center;
    }

    .img_box{
        margin: .8rem 0;
    }

    .img_box img{
        width: 7.2rem;
        height: 7.2rem;
    }

    .name{
        opacity: 0.6;
        font-family: HarmonyOS_Sans_SC_Medium;
        font-size: 1.2rem;
    }
</style>